<template>
	<view class="zzh-form">
		<view class="login-head">
			<view class="head-img"></view>
		</view>
		<view class="login-body">
			<form class="login-form" @submit="formSubmit">
				<view class="uni-form-item zzh-form-item">
					<input class="item-input" type="number" name="mobile" v-model="loginData.mobile" placeholder="手机号码"
					 placeholder-style="color:#e6e0e0;" maxlength="11" focus />
				</view>
				<view class="form-code-item">
					<view class="uni-form-item zzh-form-item">
						<input class="item-input" type="number" name="code" v-model="loginData.code" placeholder="验证码" placeholder-style="color:#e6e0e0;"
						 maxlength="6" />
					</view>
					<button class="code-button" @tap="sendCode(60)" :disabled="codeButDisabled">{{codeText}}</button>
				</view>
				<view class="uni-form-item zzh-form-item">
					<input class="item-input" type="text" name="password" v-model="loginData.password" password placeholder="密码"
					 placeholder-style="color:#e6e0e0;" maxlength="20" />
				</view>
				<view class="uni-form-item zzh-form-item">
					<input class="item-input" type="text" name="rePassword" v-model="loginData.rePassword" password placeholder="确认密码"
					 placeholder-style="color:#e6e0e0;" maxlength="20" />
				</view>
				<checkbox-group @change="changeBox">
					<view class="uni-form-item protocol-item">
						<checkbox value="1" color="#4FD2C1" />
						<navigator url="">
							<view class="hint-title">《注册协议》</view>
						</navigator>
					</view>
				</checkbox-group>
				<view class="item-button">
					<button formType="submit" class="login-button" :class="{'button-disable':buttonDisabled}" :disabled="buttonDisabled">提交</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	var graceChecker = require("common/js/graceChecker.js");
	export default {
		data() {
			return {
				codeRule: [{
						name: "mobile",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "手机号码不能为空"
					},
					{
						name: "mobile",
						checkType: "phoneno",
						checkRule: "",
						errorMsg: "请输入正确的手机号码"
					}
				],
				loginData: {
					mobile: "",
					code: "",
					reCode: "",
					password: "",
					rePassword: ""
				},
				buttonDisabled: true,
				codeButDisabled: false,
				codeText: "获取验证码"
			};
		},
		components: {},
		methods: {
			/**
			 * 用户协议复选框选择按钮
			 * */
			changeBox: function(e) {
				if (e.detail.value.length) {
					this.buttonDisabled = false;
				} else {
					this.buttonDisabled = true;
				}
			},

			/**
			 * 获取短信验证码
			 */
			sendCode: function(t) {
				let that = this;
				let checkRes = graceChecker.check(that.loginData, that.codeRule);
				if (checkRes) {
					that.codeButDisabled = true;
					that.$http.ajax({
						url: that.$http.adornUrl(that.$api.sendCode),
						data: {
							phone: that.loginData.mobile,
							type: "register"
						},
						showLoad: true,
						showMsg: true
					}).then(function(data) {
						that.codeText = t + "(s)";
						let i = setInterval(function() {
							if (t > 0) {
								that.codeText = (--t) + "(s)";
							} else {
								window.clearInterval(i);
								that.codeText = "获取验证码";
								that.codeButDisabled = false;
							}
						}, 1500);
						if (data.code == 0) {
							that.loginData.reCode = data.data;
						}
					}).catch(function(err) {
						that.codeButDisabled = false;
					})
				} else {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
				}
			},

			/**
			 * 表单提交
			 */
			formSubmit: function(e) {
				//进行表单检查
				let that = this;
				let rule = [{
						name: "mobile",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "手机号码不能为空"
					},
					{
						name: "mobile",
						checkType: "phoneno",
						checkRule: "",
						errorMsg: "请输入正确的手机号码"
					},
					{
						name: "code",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "验证码不能为空"
					},
					{
						name: "code",
						checkType: "same",
						checkRule: that.loginData.reCode,
						errorMsg: "验证码错误"
					},
					{
						name: "password",
						checkType: "notnull",
						checkRule: "",
						errorMsg: "密码不能为空"
					},
					{
						name: "password",
						checkType: "reg",
						checkRule: "^[^ ]+$",
						errorMsg: "密码不能含有空格"
					},
					{
						name: "password",
						checkType: "string",
						checkRule: "6,",
						errorMsg: "密码至少需要6位字符"
					},
					{
						name: "rePassword",
						checkType: "same",
						checkRule: that.loginData.password,
						errorMsg: "两次输入密码需一致"
					},
				];
				let formData = e.detail.value;
				let checkRes = graceChecker.check(formData, rule);
				if (checkRes) {
					that.buttonDisabled = true;
					that.$http.ajax({
						url: that.$http.adornUrl(that.$api.register),
						data: formData,
						method: "POST",
						showLoad: true,
						showMsg: true
					}).then(function(data) {
						if (data.code == 0) {
							setTimeout(function() {
								uni.navigateBack({
									delta: 1
								});
							}, 1500)
						} else {
							that.buttonDisabled = false;
						}
					}).catch(function(err) {
						that.buttonDisabled = false;
					})
				} else {
					uni.showToast({
						title: graceChecker.error,
						icon: "none"
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	@import "common/css/login.scss";

	.zzh-form {
		.login-head {
			.head-img {
				margin-top: 60upx;
			}
		}
	}
</style>
